import Snap from "@aibee/snapsvg";

// import Snap from "snapsvg";
import { STYLE_ENUM } from "../ENUM";
import { SnapTest } from "../SnapTest";

interface IVec2 {
  x: number;
  y: number;
}

class Vec2 {}

// Snap('').line

export class Line {
  element!: Snap.Element;

  start: IVec2 = { x: 0, y: 0 };
  end: IVec2 = { x: 0, y: 0 };
  gradient: Snap.Gradient;

  get x1() {
    return this.start.x;
  }
  set x1(val: number) {
    this.start.x = val;
    this.element.attr({
      x1: this.start.x,
    });
    this.gradient.attr({
      x1: this.start.x,
    });
  }
  get y1() {
    return this.start.y;
  }
  set y1(val: number) {
    this.start.y = val;
    this.element.attr({
      y1: this.start.y,
    });
    this.gradient.attr({
      y1: this.start.y,
    });
  }

  get x2() {
    return this.end.x;
  }
  set x2(val: number) {
    this.end.x = val;
    this.element.attr({
      x2: this.end.x,
    });
    this.gradient.attr({
      x2: this.end.x,
    });
  }
  get y2() {
    return this.end.y;
  }
  set y2(val: number) {
    this.end.y = val;
    this.element.attr({
      y2: this.end.y,
    });
    this.gradient.attr({
      y2: this.end.y,
    });
  }

  get gran() {
    return this.gradient;
  }
  set gran(val: Snap.Gradient) {
    this.gradient = val;
    // this.gradient.attr({
    //     x1: this.x1,
    //     y1: this.y1,
    //     x2: this.x2,
    //     y2: this.y2
    // });
  }

  constructor(element: Snap.Element, startPoint: IVec2, ctx: SnapTest) {
    this.gradient = ctx.ctx.gradient(STYLE_ENUM.gradient);
    this.element = element;
    this.x1 = startPoint.x;
    this.y1 = startPoint.y;
    this.x2 = startPoint.x;
    this.y2 = startPoint.y;

    this.gradient.attr({
      gradientUnits: "userSpaceOnUse",
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
    this.element.attr({
      stroke: "white",
      fill: "none",
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
  }
  afterfn(ctxs: Snap.Paper) {
    this.element.after(ctxs);
  }
  /**
   * 世界坐标
   * @param point
   * @param time
   */
  move(point: IVec2, time: number = 1000) {
    Snap.animate(
      [this.start.x, this.start.y],
      [point.x, point.y],
      (res: any) => {
        this.x2 = res[0];
        this.y2 = res[1];
      },
      time
    );
  }

  /**
   * 偏移坐标
   */
  moveTo(point: IVec2, time: number = 500) {}

  remove(time = 1000, callback?: Function) {
    Snap.animate(
      [this.x1, this.y1],
      [this.x2, this.y2],
      (res: any) => {
        this.x1 = res[0];
        this.y1 = res[1];
      },
      time,
      undefined,
      () => {
        this.element.remove();
        this.gradient.remove();
        callback && callback(true);
      }
    );
  }
  dottedline() {
    setTimeout(() => {
      this.element.attr({
        stroke: this.gran,
      });
    }, 200);
  }
}
